<template>
  <p>App</p>
  <p>{{ num }}</p>
  <button @click="update">按钮</button>
  <p ref="p">{{ person.age }}</p>
  <button @click="setAge">更新</button>

  <Child :num="num" @setNum="update" />
</template>

<script lang="ts" setup>
// setup语法糖
import { ref, reactive, watch, computed, onMounted } from "vue";
// 引入组件，会自动注册
import Child from "./views/Child/index.vue";

// 定义即暴露
const num = ref(0);

const update = () => {
  num.value++;
};

const person = reactive({
  age: 12,
});

const setAge = () => {
  person.age++;
};

onMounted(() => {
  console.log(111);
  console.log(p.value);
});

const p = ref();
</script>

<style scoped></style>
